网管设置
<template>
    <div class="dashboard-editor-container">
        
        <div style="background: #fff; padding: 16px 16px; margin-bottom: 32px">
            <div class="btn topSubmitBtn">
           
            <el-button style="float: right; margin-right:10px;" size="small" type="primary" @click="timeSet('setLogForm')">保存设置</el-button>
        </div>
          <div class="input-item">
          <div class="parameType-wrap">
            <div class="parameType">
                <div class="title">
                    <span>登录参数</span>
                    <!-- <el-button style="float: right; padding:4px 8px;margin-left:10px;" type="primary" @click="timeSet('setLogForm')">保存</el-button> -->
                </div>
                <div>
                    <el-form :model="setLogForm" ref="setLogForm" :rules="rules" label-width="30%">
                        <el-row :gutter="24">
                            <!-- <el-col :sm="24" :md="24" :lg="24">
                                <el-form-item  label="登录超时时间：" prop="LogoutExpireTime">
                                    <el-input size="small" @change="((val)=>{maxChange(val, 0)})" oninput="value=value.replace(/^(-1+)|[^\d]+/g,'')" type="number" v-model.number="setLogForm.LogoutExpireTime" placeholder="请输入登录超出时间"></el-input>  分钟
                                </el-form-item>
                            </el-col> -->
                            <el-col :sm="24" :md="24" :lg="24">
                                <el-form-item  label="操作超时时间：" prop="UIOperaExpireTime">
                                    <el-input size="small" @change="((val)=>{maxChange(val, 1)})" oninput="value=value.replace(/^(-1+)|[^\d]+/g,'')" type="number" v-model.number="setLogForm.UIOperaExpireTime" placeholder="请输入登录超出时间"><span slot="append">分</span></el-input>
                                    <span style="color:darkgrey"> （配置为0表示不自动注销）</span>
                                </el-form-item>
                            </el-col>
                            <el-col :sm="24" :md="24" :lg="24">
                                <el-form-item  label="密码强制修改时间：" prop="PwdExpireTime">
                                    <el-input size="small" type="number" @change="((val)=>{maxChange(val, 2)})"  oninput="value=value.replace(/^(-1+)|[^\d]+/g,'')" v-model.number="setLogForm.PwdExpireTime" placeholder="请输入密码定期修改时间"><span slot="append">天</span></el-input>
                                    <span  style="color:darkgrey"> （配置为0表示不强制修改）</span>
                                </el-form-item>
                            </el-col>
                            <el-col :sm="24" :md="24" :lg="24">
                                <el-form-item  label="最大密码尝试次数：" prop="PwdRetryTimes">
                                    <el-input size="small"  type="number" @change="((val)=>{maxChange(val, 3)})"  oninput="value=value.replace(/^(-1+)|[^\d]+/g,'')" v-model.number="setLogForm.PwdRetryTimes" placeholder="请输入登陆失败最大次数"><span slot="append">次</span></el-input>
                                    <span  style="color:darkgrey"> （配置为0表示不限制尝试次数）</span>
                                </el-form-item>
                            </el-col>
                            <el-col :sm="24" :md="24" :lg="24">
                                <el-form-item  label="账号锁定后自动锁定时长：" prop="AutoUnlockTime">
                                    <el-input size="small" type="number" @change="((val)=>{maxChange(val, 4)})"  oninput="value=value.replace(/^(-1+)|[^\d]+/g,'')" v-model.number="setLogForm.AutoUnlockTime" placeholder="请输入自动解锁时间"><span slot="append">分</span></el-input>
                                    <span  style="color:darkgrey"> （配置为0表示永不解锁）</span>
                                </el-form-item>
                            </el-col>
                            <el-col :sm="24" :md="24" :lg="24">
                                <el-form-item  label="双因子认证（UKey）：" prop="AutoUnlockTime">
                                    <el-switch :active-value="1" :inactive-value="0" size="small" v-model="setLogForm.UkeySwitch"></el-switch>
                                    
                                    
                                    <span  style="color:darkgrey">（开启双因子认证后，需要下载“证书导入软件” ）</span>
                                    <el-button type="text" v-if="setLogForm.UkeySwitch ===1" @click="download">下载软件</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :sm="24" :md="24" :lg="24">
                                <el-form-item  label="允许登录终端地址或地址段：" prop="LoginWhiteList">
                                    <el-input size="small"  maxlength='200' placeholder="单IP格式：192.168.1.100
IP段格式：192.168.1.100~192.1681.200
IP掩码段格式：192.168.1.1/24" show-word-limit   type="textarea" :rows="8" v-model="setLogForm.LoginWhiteList" ></el-input>
<span  style="color:darkgrey">（ 配置为空表示不限制 ）</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>


            <!-- <div class="parameType">
                <div class="title">
                    <span>可信IP地址</span>
                    <el-button style="float: right; padding:4px 8px;margin-left:10px;" type="primary" @click="ipSet('ipForm')">保存</el-button>
                </div>
                <div>
                    <el-form :model="ipForm" ref="ipForm" :rules="IPRule" label-width="20%">
                        <el-row :gutter="24">

                        </el-row>
                    </el-form>
                </div>
            </div> -->
          </div>
          </div>
        </div>
    </div>
</template>

<script>
import { cfunc, ExportConfig } from '@/api/user';
export default {
    data(){
        var validators = (rule, value, callback) =>{
            var regIP = /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/
            var prefixIP = /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))\/([1-2][0-9]|3[0-2]|[1-9])$/
            var decimalnetmask = /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))\/((254|252|248|240|224|192|128|0)\.0\.0\.0|(255\.(254|252|248|240|224|192|128|0)\.0\.0)|(255\.255\.(254|252|248|240|224|192|128|0)\.0)|(255\.255\.255\.(254|252|248|240|224|192|128|0)))$/;
            var lasIP = /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))-(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))$/;
            // if (regIP.test(value)||prefixIP.test(value)||decimalnetmask.test(value)||lasIP.test(value)) {
            //     callback()
            // } else if(value === '' || value === undefined){
            //     callback(new Error('地址不能为空'))
            // } else {
            //     callback(new Error('请输入正确的IP地址格式'))
            // }
            let regexp = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
            let valdata = value.split(',')
            let data = valdata[valdata.length - 1]
            //格式是否符合要求
            let isCorrect = true
            //是否重复
            let isRepeat = false
            if (valdata.length) {
                for (let i = 0; i < valdata.length; i++) {
                    // console.log( regexp.test(valdata[i]));
                    if (regexp.test(valdata[i]) === false) {
                        isCorrect = false
                        if ( regIP.test(valdata[i]) || prefixIP.test(valdata[i]) || decimalnetmask.test(valdata[i]) || lasIP.test(valdata[i]) === true) {
                            isCorrect = true
                        }
                    }
                }
                // 每次输入的会立即放在valdata数组中,在查找数组中是否已经存在该元素的时候需要排除自身
                //即新加入数组的元素,所以循环到倒数第二个元素时停止
                for (let i = 0; i < valdata.length - 1; i++) {
                    if (valdata[i] === data) {
                        isRepeat = true
                    }
                }
            }
            if (value === '') {
                callback()
            } else if (!isCorrect) {
                callback(new Error('请输入正确的IP地址/网段格式,IP之间用逗号隔开'))
            } else if (isRepeat) {
                callback(new Error('输入的IP地址不能重复'))
            } else {
                callback()
            }
        };
        return{
            setLogForm:{
                // LogoutExpireTime:0,
                UIOperaExpireTime:0,
                PwdExpireTime:0,
                PwdRetryTimes:0,
                AutoUnlockTime:0,
                UkeySwitch:0,
                LoginWhiteList:''
            },
            ipForm:{

            },
            rules:{
                UIOperaExpireTime:{ required: true, message: '请输入操作超时时间(0代表不限制,范围为0-60)', trigger: 'blur' },
                // LogoutExpireTime:{ required: true, message: '请输入登录超出时间(0代表不限制,范围为0-14400)', trigger: 'blur' },
                PwdExpireTime:{ required: true, message: '请输入密码定期修改时间(0代表不限制,范围为0-180)', trigger: 'blur' },
                PwdRetryTimes:{ required: true, message: '请输入登陆失败最大次数(0代表不限制,范围为0-10)', trigger: 'blur' },
                AutoUnlockTime:{ required: true, message: '请输入自动解锁时间(0代表不限制,范围为0-60)', trigger: 'blur' }
            },
            IPRule:{
                LoginWhiteList:{ required: true, validator:validators, trigger: 'blur' }
            }
        }
    },
    created(){
        this.GetLoginLimitConfig();
        // this.GetLoginWhiteList();
        // console.log(this.$store.state.user.overTime);
    },
    methods:{
        // 获取登录限制设置
        async GetLoginLimitConfig(){
            const paramData = {
                Header:{
                    CmdCode:"GetLoginLimitConfig"
                },
                Token:this.$store.state.user.Token
            }
            const res = await cfunc(paramData);
            if (res.Status.StatusCode===0) {
                this.setLogForm = res.Data
                this.$store.commit('user/SET_OVERTIME',res.Data.UIOperaExpireTime);
            }
        },
        // 下发登录限制设置
        async timeSet(formName){
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    const paramData = {
                        Header:{
                            CmdCode:"SetLoginLimitConfig"
                        },
                        Data:this.setLogForm,
                        Token:this.$store.state.user.Token
                    }
                    const res = await cfunc(paramData);
                    if (res.Status.StatusCode===0) {
                        this.GetLoginLimitConfig();
                        this.$message.success('设置成功')
                        window.location.reload()
                    }
                }
            })
        },
        // 下载驱动
        async download(){
            // const paramData = {
            //     Header: {
            //         CmdCode: "ExportUkeyTool"
            //     },
            //     Data:{
            //         FileName :"UKeySetup.exe"
            //     },
            //     Token:this.$store.state.user.Token
            // }
            // await ExportConfig(paramData).then((res)=>{
            //     let blobUrl = window.URL.createObjectURL(new Blob([res]));
            //     const a = document.createElement('a');
            //     a.style.display = 'none';
            //     a.download = 'UKeySetup.exe';
            //     a.href = blobUrl;
            //     a.click();
            //     this.$message.success("导出成功")
            // });
            window.open('https://127.0.0.1/UKeySetup.exe');
        },
        // // 获取可信IP地址
        // async GetLoginWhiteList(){
        //     const paramData = {
        //         Header:{
        //             CmdCode:"GetLoginWhiteList"
        //         },
        //         Token:this.$store.state.user.Token
        //     }
        //     const res = await cfunc(paramData);
        //     if (res.Status.StatusCode===0) {
        //         this.ipForm = res.Data;
        //     }
        // },
        // 下发可信IP地址
        async ipSet(formName){
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    const paramData = {
                        Header:{
                            CmdCode:"SetLoginWhiteList"
                        },
                        Data:this.ipForm,
                        Token:this.$store.state.user.Token
                    }
                    const res = await cfunc(paramData);
                    if (res.Status.StatusCode===0) {
                        this.GetLoginWhiteList();
                        this.$message.success('设置成功');
                    }
                }
            })
        },
        // 确定按钮
        confirmClick(){

        },
        maxChange(val,status){
            // let max = 14400;
            let max1 = 60;
            let max2 = 180;
            let max3 = 10;
            let max4 = 60;
            // console.log(val);
            if (status === 1) {
                if(val > max1) {
                    this.setLogForm.UIOperaExpireTime = 0;
                }
            }else if (status === 2) {
                if(val > max2) {
                    this.setLogForm.PwdExpireTime = 0;
                }
            }else if (status === 3) {
                if(val > max3) {
                    this.setLogForm.PwdRetryTimes = 0;
                }
            }else if (status === 4) {
                if(val > max4) {
                    this.setLogForm.AutoUnlockTime = 0;
                }
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.parameType-wrap{
  // display:flex;
  // justify-content: space-between;
  // flex-wrap: wrap;
  // justify-items: center;
}
::v-deep.input-item{
    margin-top: 10px;
    .parameType{
      border: 1px solid #eceff5;
      border-radius: 3px;
      // width: 50%;
      padding: 10px;
      margin: 10px ;
      box-shadow: 0 0 10px #eceff5;
      .title{
        border-bottom: 1px solid #eceff5;
        padding-bottom : 10px;
      }
    }
    .el-form-item{
      margin-bottom: 6px;
    }
    .el-input-group__append, .el-input-group__prepend{
      width: 60px;
      padding: 0;
      text-align: center;
    }
  }
  .title{
    margin-bottom: 20px;
  }
  ::v-deep.el-form-item{
    label{
      font-weight: 500;
    }
  }
// .box-card{
//   // margin: 16px;
//   margin-bottom: 16px !important;
// }
// .clearfix:before,
// .clearfix:after {
//   display: table;
//   content: "";
// }
// .clearfix:after {
//   clear: both
// }
// ::v-deep.el-card__header{
//   padding: 10px !important;
// }
// .el-form-item{
//   margin-bottom: 10px !important;
// }
.el-input--small{
    width: 50% !important;
}
.el-textarea{
    width: 50% !important;
}
</style>